<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
		    <block slot="content">背景音乐提取</block>
		</cu-custom>
		<view class="solids video padding-sm">
			<view @tap="upload">
				<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
			</view>
			<view @tap="upload">
				<text>点我上传视频提取背景音乐</text>
			</view>
		</view>		
		<view class="padding-sm" v-if="result">
			<video class="video-play"  v-bind:src="tempFilePath"/>
		</view>
		
		<view class="padding-sm flex flex-direction" style="margin-top: -7px;" @click="complete()" v-if="result">
			<button class="cu-btn bg-cyan">开始提取音乐</button>
		</view>

		<view class="box" v-if="showMusic">
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-orange shadow-blur" @click="handleAudio(1)">播放音乐</button>
				<button class="cu-btn bg-green  shadow" @click="handleAudio(2)">暂停音乐</button>
			</view>
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-orange shadow-blur" @click="copyMusic">复制音乐链接</button>
				<button class="cu-btn bg-green  shadow" @click="downloadFile">下载音乐</button>
			</view>
		</view>
		<ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            tempFilePath: '',
				result:false,
				text:'',
				handleFaceStatus:false,
				resultImg:'',
				musicUrl:'',
				innerAudioContext:null,
				showMusic:false
	        }
	    },
		onLoad() {
			this.initAudio()
		},
		onShareAppMessage(res) {
			return {
			  title: '抖音、快手、皮皮虾短视频一键去水印,去水印还能这么简单,图片也可以去水印哟',
			  path: '/pages/index/index',
			  imageUrl: 'http://parse-video-server.oss-cn-hangzhou.aliyuncs.com/share.png'
			}
		},
		onShareTimeline: () => {
		  return {
		    title: getApp().globalData.shareTitle,
		    query: "/pages/index/index",
		    imageUrl:getApp().globalData.sharePic
		  }
		},
	    methods: {
			initAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
			},
			copyMusic() {
				var that = this;
				uni.setClipboardData({
					data: that.musicUrl,
					success: function () {
						uni.setStorageSync(that.musicUrl,that.musicUrl)
						uni.showModal({
							content:'已经复制链接到剪切板,请粘贴到浏览器下载'
						})
					}
				});
			},
			handleAudio(index) {
				if(index == 1) {
					this.innerAudioContext.play()
				}else {
					this.innerAudioContext.stop()
				}
			},
			
	        upload() {
				var that = this;
	            uni.chooseVideo({
	                count: 1, //默认9
	                sourceType: ['album'], //从相册选择
	                success: (res) => {
						that.showMusic = false;
						var size = (res.size / (1024 * 1024)).toFixed(2);
						console.log("视频大小:"+size)
						if(size > 30) {
							uni.showModal({
								content:"视频超过30M,暂时无法处理"
							})
							return
						}
	                    that.tempFilePath = res.tempFilePath
						that.result = true
	                }
	            });
	        },
			complete() {
				var that = this;
				uni.showLoading({
					title:'处理中'
				})
				var globaData = getApp().globalData;
				uni.uploadFile({
					url: that.$qrCodeUrl + "/upload/file", //仅为示例，非真实的接口地址
					filePath: that.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						console.log(res)
						var uploadData = JSON.parse(res.data).data;
						console.log(uploadData)
						//开始执行提取音频操作
						wx.login({
						  success (res) {
							const code = res.code; 
							uni.request({
								url:  that.$qrCodeUrl+'/upload/videoMusic',
								data: {
								  code:code,
								  filePath:uploadData,
								  source:that.$source
								},
								method:"POST",
								success: (res) => {
									uni.showToast({
										title:'提取成功'
									})
									if(res.data.code === '0001') {
										console.log(res.data)
										that.musicUrl = res.data.data
										that.innerAudioContext.src = that.musicUrl
										that.showMusic = true
									}else {
										uni.showModal({
											content:'未知错误，请联系作者进行解决'
										})
									}
								},
								complete(res) {
									uni.hideLoading();
								}
							});
						  }
						})	
					},
					fail(res) {
						uni.showModal({
							content:'上传失败，请联系作者进行解决'
						})
						uni.hideLoading()
					}
				});
			},
			downloadFile() {
				var that = this;
				uni.showLoading({
					title: '下载中', 
					mask:true
				});
				uni.downloadFile({
				    url: that.musicUrl, //仅为示例，并非真实的资源
				    success: (res) => {
				        if (res.statusCode === 200) {
							uni.saveFile({
							      tempFilePath: res.tempFilePath,
							      success: function (res) {
							        var savedFilePath = res.savedFilePath;
									uni.showModal({
										title:'文件路径:'+savedFilePath
									})
							      }
							    });
				            
				        }else {
							uni.showModal({
								title:'下载失败，请复制音乐链接，打开手机浏览器下载'
							})
						}
				    },
					fail:function(){
						uni.showModal({
							content:'下载失败，请复制音乐链接到浏览器下载'
						})
					},
					complete:function(){
						uni.hideLoading()
					}
				});
			}
	    }
	}
</script>

<style>
	.video {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100px;
		background: white;
	}
	
	.video-play {
		width: 100%;
		height: 240px;
	}
	.music {
		background: red;
	}
	
	.img {
		width: 100%;
		text-align: center;
	}
	
	.font-color {
		color: #0081FF;
	}
	
	.remo-color {
		color: red;
	}
</style>
